import React, { useState, useEffect } from 'react'
import { Table, Button, Popconfirm, Pagination,Select,Tag, Input } from 'antd'
import { $checkout, $list,$del } from '../../api/guestApi';
import { $list as $resideList } from '../../api/resideApi';
import AddGuest from './AddGuest';
import MyNotification from '../../components/MyNotification/MyNotification';
export default function Guest() {
    
    let [resideList,setResideList]=useState([])
    
    const loadStateList=()=>{
        $resideList().then((data)=>{
            data=data.map((r)=>{
                return {
                    value:r.resideStateId,
                    label:r.resideStateName
                }
            })
            data.unshift({value:0,label:'请选择结账状态'})
            setResideList(data);
        })
    }
    let [guestName,setGuestName]=useState('')
    let [resideStateId,setResideStateId]=useState(0)
    let [count, setCount] = useState(1)
    let [pageIndex, setPageIndex] = useState(1)

    let [guestList, setGuestList] = useState([])
    const [open, setOpen] = useState(false);
    let [guestId, setGuestId] = useState(0)
    let [notiMsg, setNotiMsg] = useState({ type: '', description: '' })
    useEffect(() => {
        loadStateList()
        loadList()
    }, [pageIndex]);
    const loadList = () => {
        $list({pageSize:2, pageIndex,resideStateId,guestName }).then(({ data, count }) => {
            console.log(data)
            data = data.map(r => {
                return {
                    key: r.guestId,
                    guestId:r.guestId,
                    identityId:r.identityId,
                    guestName:r.guestName,
                    phone:r.phone,
                    roomId:r.roomId,
                    roomTypeName:r.room.roomType.roomTypeName,
                    roomTypePrice:r.room.roomType.roomTypePrice,
                    bedNum:r.room.roomType.bedNum,
                    resideDate:r.resideDate,
                    leaveDate:r.leaveDate,
                    deposit:r.deposit,
                    totalMoney:r.totalMoney,
                    guestNum:r.guestNum,
                    resideStateName:r.resideState.resideStateName,
                    
                }
            })

            setGuestList(data)
            setCount(count)
        })
    }
    const edit = (guestId) => {

        setOpen(true)
        setGuestId(guestId)
    }
    const del = (guestId) => {
        $del({guestId}).then(({ success, message }) => {
            if (success) {
                setNotiMsg({ type: 'success', description: message })
                loadList()
            } else {
                setNotiMsg({ type: 'error', description: message })
            }
        })

    }
    const columns = [
        {
            title: '姓名',
            dataIndex: 'guestName',
        },
        {
            title: '电话',
            dataIndex: 'phone',
        },
        {
            title: '身份证',
            dataIndex: 'identityId',
        },
        {
            title: '房间号',
            dataIndex: 'roomId',
        },
        {
            title: '房间类型',
            dataIndex: 'roomTypeName',
        },
        {
            title: '房间价格',
            dataIndex: 'roomTypePrice',
        },
        {
            title: '床位数',
            dataIndex: 'bedNum',
        },
        {
            title: '入住日期',
            dataIndex: 'resideDate',
        },
        {
            title: '离开日期',
            dataIndex: 'leaveDate',
        },
        {
            title: '押金',
            dataIndex: 'deposit',
        },
        {
            title: '总金额',
            dataIndex: 'totalMoney',
        },
        {
            title: '人数',
            dataIndex: 'guestNum',
        },
        {
            title: '结账状态',
            dataIndex: 'resideStateName',
            render: (resideStateName) => (
                <Tag color={resideStateName==='已结账'?'lightgreen':'lightcoral'}>
                {resideStateName}
              </Tag>
              ),
        },
        {
            title: '操作',
            key: 'action',
            render: (ret) => {
                return (
                    ret.resideStateName==='已结账'?
                    <Popconfirm
                    title="提示"
                    description="确定删除吗?"
                    onConfirm={() => { del(ret.guestId) }}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button size='small' danger style={{ marginLeft: '5px' }} >删除</Button>
                </Popconfirm>
                :
                <>
                <Button size='small' style={{ borderColor: 'orange', color: 'orange' }} onClick={() => {
                    edit(ret.guestId)
                }}>编辑</Button>
                <Button size="small" style={{marginLeft:'5px',borderColo:'lightseagreen',color:'lightseagreen'}}
                onClick={()=>{
                    $checkout({guestId:ret.guestId}).then(ret=>{
                        setNotiMsg({
                            type:"success",
                            description:`结账成功！总房费为：${ret.totalMoney}元`
                        })
                        loadList()
                    })
                }}
                >结账</Button>
                </>
                
                
                )
            },
        },
    ];
    return (
        <>
            <div className='search'>
                <span>顾客姓名：</span>
                <Input size='small' style={{width:'200px'}} value={guestName} onChange={(e)=>{setGuestName(e.target.value)}}/>
                <span style={{marginLeft:'5px'}}>结账状态：</span>
                <Select size="small" style={{width:'200px'}}
                    options={resideList} defaultValue={0} onSelect={(value)=>{setResideStateId(value)}}
                ></Select>
                <Button type="primary" style={{marginLeft:'5px'}} size="small" onClick={loadList}>查询</Button>
                <Button style={{marginLeft:'8px'}} size="small" onClick={() => { setOpen(true) }}>
                    添加
                </Button>
            </div>
            <Table size="small" dataSource={guestList} columns={columns} pagination={false} />
            <Pagination size="small" defaultCurrent={pageIndex} total={count} pageSize={2} onChange={(page) => { setPageIndex(page) }} />
            <AddGuest open={open} setOpen={setOpen} loadList={loadList} guestId={guestId} setGuestId={setGuestId}/>
            <MyNotification notiMsg={notiMsg} />
        </>
    )
}
